/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* hooks */
import { useRoleViewAuth } from '@src/modules/account/roleModule/hooks'
/* model */
import Role, { RoleType } from '@model/entity/Role/Role'
/* scss */
import '@src/modules/account/roleModule/component/RoleViewHeader/index.scss'
/* vue */
import { ComponentInstance, ComputedRef, defineComponent, ref, computed, PropType } from 'vue'
/* service */
import roleModule from '@service/RoleService'
import {t} from '@src/locales'

export type RoleViewHeaderProps = {
  role: RoleType;
}

export interface RoleViewHeaderSetupState {
  displayName: ComputedRef<string>;
}

export enum RoleViewHeaderEventEnum {
  Input = 'input',
  Delete = 'delete',
  Edit = 'edit',
  Reset = 'reset'
}

export type RoleViewHeaderEmitsOptions = {
  input: () => void;
}

export type RoleViewHeaderInstance = ComponentInstance & RoleViewHeaderSetupState
export type RoleViewHeaderVM = RoleViewHeaderSetupState & RoleViewHeaderProps & ComponentInstance

export default defineComponent({
  name: ComponentNameEnum.RoleViewHeader,
  emits: [
    RoleViewHeaderEventEnum.Input,
    RoleViewHeaderEventEnum.Delete,
    RoleViewHeaderEventEnum.Edit,
    RoleViewHeaderEventEnum.Reset
  ],
  props: {
    role: {
      type: Object as PropType<RoleType>,
      required: true
    }
  },
  setup(props: RoleViewHeaderProps, { slots, emit }) {
    
    const { canEditRole, canDeleteRole } = useRoleViewAuth()
    
    const displayName: ComputedRef<string> = computed(() => {
      return props.role.name || ''
    })
    
    const description = computed(() => {
      return props.role.describe || ''
    })
    
    const canEdit: ComputedRef<boolean> = computed(() => {
      // 服务商主管不能编辑角色权限（TODO 暂时先用中文判断，等国际化时后端提供服务商主管唯一标识去判断）
      return roleModule.isNotSystemAdmin(props.role) && canEditRole.value && !(props.role.name==='服务商主管' && props.role.isSystem===1)
    })
    
    const canDelete: ComputedRef<boolean> = computed(() => {
      return (
        roleModule.isNotSystemAdmin(props.role) 
        && roleModule.isCustomRole(props.role) 
        && canDeleteRole.value
      )
    })
    
    const canReset: ComputedRef<boolean> = computed(() => {
      return (
        roleModule.isNotSystemAdminRole(props.role) 
        && roleModule.isSystemRole(props.role)
        && roleModule.isRoleEdited(props.role)
        && canEditRole.value
      )
    })
    
    function onClickDeleteRoleHandler() {
      emit(RoleViewHeaderEventEnum.Delete)
    }
    
    function onClickEditRoleHandler() {
      emit(RoleViewHeaderEventEnum.Edit)
    }
    
    function onClickResetRoleHandler() {
      emit(RoleViewHeaderEventEnum.Reset)
    }
    
    return {
      displayName,
      description,
      canEdit,
      canDelete,
      canReset,
      onClickDeleteRoleHandler,
      onClickEditRoleHandler,
      onClickResetRoleHandler
    }
  },
  methods: {
  },
  render() {
    return (
      <div class={ComponentNameEnum.RoleViewHeader}>
        
        <div class="role-view-header__top">
          
          <h2 class="role-view-header__top-text">
            { this.displayName }
          </h2>
          
          {this.canEdit && (
            <el-button
              type="plain-third"
              onClick={this.onClickEditRoleHandler}
            >
              <i class="iconfont icon-edit-square"></i>
              {t('common.base.editRolePerssion')}
            </el-button>
          )}
          
          {this.canReset && (
            <el-button
              type="plain-third"
              onClick={this.onClickResetRoleHandler}
            >
              {t('common.base.resetPerssion')}
          </el-button>
          )}
          
          {this.canDelete && (
            <el-button
              type="plain-third"
              onClick={this.onClickDeleteRoleHandler}
            >
              <i class="iconfont icon-delete"></i>
              {t('common.base.deleteRole')}
            </el-button>
          )}
          
        </div>
        
        <div class="role-view-header__bottom">
          <el-tooltip content={this.description} placement="bottom">
            <span>
              { this.description }
            </span>
          </el-tooltip>
        </div>
        
      </div>
    ) as any
  }
}) as any
